<template>
  <el-form :model="dataForm" :rules="rules" label-width="120px" label-position="top">
    <el-row justify="space-between">
      <el-col :span="11">
        <el-form-item prop="idNumberType" :label="$t('user.idNumberType')" required>
          <ren-select v-model="dataForm.idNumberType" dict-type="idNumberType" @change="changeHandle"></ren-select>
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item prop="idNumber" :label="$t('user.idNumber')" required>
          <el-input v-model="dataForm.idNumber" :placeholder="$t('input')" @input="inputHandle"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const props = defineProps({
  modelValue: String,
  idNumberType: Number,
});

const dataForm = computed(() => ({
  idNumber: props.modelValue,
  idNumberType: props.idNumberType,
}));

const rules = ref({
  idNumber: [{ required: true, message: t("validate.required"), trigger: "blur" }],
  idNumberType: [{ required: true, message: t("validate.required"), trigger: "change" }],
});

const emit = defineEmits(["update:modelValue", "update:idNumberType"]);

const changeHandle = (val: number) => {
  emit("update:idNumberType", val)
};

const inputHandle = (val: string) => {
  emit("update:modelValue", val);
};
</script>
